<style type="text/css">
    li{
        list-style-type: none;
    }
    .nav .nav-item{
        height: 100px;
        display: flex;
        align-items: center;
        border: 1px solid #cccccc;;
        padding: 6px;
        width: 26%;
        float: left;
        margin-right: 2%;
        margin-bottom: 10px;
        position: relative;
    }
    .nav-item div:last-child{
        width: 180px;
        overflow: hidden;
    }
    .nav-item:after{
        content: " ";
        display: block;
        clear: both;
    }
    .nav .nav-item .icon-img{
        margin-right: 10px;
    }
    .fa-close{
        position: absolute;
        right: 6px;
        top: 6px;
        color: #0baae4;
        font-size: 14px;
    }
    img{
        width: 30px;
        height: 30px;
    }
    .await-img{
        width: 70px;
        text-align: center;
        margin-top: 10px;
        margin-right: 10px;
        float: left;
    }
    .await-img .title{
        color: #999;
        margin-top: 4px;
    }
    .plus{
        font-size: 30px;
        display: inline-block;
        margin-top: 20px;
        color: #0baae4;
        float: left;
    }
</style>
<form id="second-form" role="form" data-toggle="validator" method="POST" action="" class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('幻灯片ID')}:</label>
        <div class="col-xs-12 col-sm-4">
            <input type="text" class="form-control" placeholder="请输入" name="row[swiper]" value="{$row['swiper']|default=''}">
        </div>
        <div class="col-xs-4 col-sm-4">请使用英文,分隔id</div>
    </div>
    <div class="form-group ">
        <label class="control-label col-xs-12 col-sm-2">{:__('模块')}:</label>
        <div class="col-xs-12 col-sm-10">
           <ul class="nav">
               {volist name="$row['module']" id="it" key="in"}
               <li class="nav-item">
                   <div class="text-center icon-img">
                       <div class="icon-select">
                           {volist name="$it.icons" id="icon"}
                           <img src="{$icon}" alt="" class="img">
                           {/volist}
                       </div>
                       <input type="hidden" name="row[module][{$in}][icon]" value="{$it.icon}" class="icons-module">
                       <p style="font-size: 12px">选择</p>
                   </div>
                   <div>
                       <div>
                           <input type="text" class="form-control" placeholder="请输入导航名称" name="row[module][{$in}][name]" value="{$it.name}">
                       </div>
                       <div>
                           <select name="row[module][{$in}][url]" class="form-control">
                               <option value="{$it.url}">{$it.url}</option>
                           </select>
                       </div>
                   </div>
                   <span class="fa fa-close"></span>
               </li>
               {/volist}
               <li class="plus" data-type="1">
                   <i class="fa fa-plus"></i>
               </li>
           </ul>
        </div>
    </div>
    <div class="form-group ">
        <label class="control-label col-xs-12 col-sm-2">{:__('套餐是否显示')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input  id="c-switch" name="row[combo_show]" type="hidden" value="{$row.combo}">
            <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
                <i class="fa fa-toggle-on text-success {eq name="$row.combo" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
            </a>
        </div>
    </div>
    <div class="form-group ">
        <label class="control-label col-xs-12 col-sm-2">{:__('底部导航')}:</label>
        <div class="col-xs-12 col-sm-10">
            <ul class="nav">
                {volist name="$row['nav']" id="item" key="index"}
                <li class="nav-item">
                    <div class="text-center icon-img">
                        <div class="icon-select">
                            {volist name="$item.icons" id="icon"}
                            <img src="{$icon}" alt="" class="img">
                            {/volist}
                        </div>
                        <input type="hidden" name="row[nav][{$index}][icon]" value="{$item.icon}" class="icons-module">
                        <p style="font-size: 12px">选择</p>
                    </div>
                    <div>
                        <div>
                            <input type="text" class="form-control" placeholder="请输入导航名称" name="row[nav][{$index}][name]" value="{$item.name}">
                        </div>
                        <div>
                            <select name="row[nav][{$index}][url]" class="form-control">
                                <option value="{$item.url}">{$item.url}</option>
                            </select>
                        </div>
                    </div>
                    <span class="fa fa-close"></span>
                </li>
                {/volist}
                <li class="plus" data-type="2">
                    <i class="fa fa-plus"></i>
                </li>
            </ul>
        </div>
    </div>
    <div class="form-group ">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
